<template>
  <view class="register-container">
    <view class="register-form">
      <view class="logo-section">
        <image class="logo" src="/static/home/Logo.jpg"></image>
        <text class="app-name">ShapeUp 健身</text>
        <text class="app-slogan">让健身更简单</text>
      </view>
      
      <view class="form-container">
        <view class="form-item">
          <input 
            class="form-input" 
            v-model="formData.username" 
            placeholder="请输入用户名" 
          />
        </view>
        
        <view class="form-item">
          <input 
            class="form-input" 
            v-model="formData.password" 
            password="true" 
            placeholder="请输入密码" 
          />
        </view>
        
        <view class="form-item">
          <input 
            class="form-input" 
            v-model="formData.confirmPassword" 
            password="true" 
            placeholder="请再次输入密码" 
          />
        </view>
        
        <view class="form-item">
          <input 
            class="form-input" 
            v-model="formData.email" 
            placeholder="请输入邮箱地址" 
          />
        </view>
        
        <view class="form-item">
          <input 
            class="form-input" 
            v-model="formData.phone" 
            placeholder="请输入手机号" 
          />
        </view>
      </view>
      
      <view 
        class="custom-button primary" 
        :class="{ loading: loading }"
        @click="handleRegister"
      >
        <text v-if="!loading">注册</text>
        <text v-else>注册中...</text>
      </view>
      
      <view class="form-footer">
        <text @click="goToLogin">已有账号？立即登录</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { authApi } from '../../src/services/api'

// 加载状态
const loading = ref(false)

// 表单数据
const formData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phone: ''
})

// 表单验证规则
const validateForm = () => {
  if (!formData.username) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none'
    })
    return false
  }

  if (!formData.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return false
  }

  if (formData.password.length < 6) {
    uni.showToast({
      title: '密码长度不能少于6位',
      icon: 'none'
    })
    return false
  }

  if (!formData.confirmPassword) {
    uni.showToast({
      title: '请确认密码',
      icon: 'none'
    })
    return false
  }

  if (formData.password !== formData.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return false
  }

  // 邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (formData.email && !emailRegex.test(formData.email)) {
    uni.showToast({
      title: '请输入正确的邮箱地址',
      icon: 'none'
    })
    return false
  }

  // 手机号验证
  const phoneRegex = /^1[3-9]\d{9}$/
  if (formData.phone && !phoneRegex.test(formData.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return false
  }

  return true
}

// 处理注册
const handleRegister = async () => {
  try {
    // 表单验证
    if (!validateForm()) {
      return
    }

    // 设置加载状态
    loading.value = true

    // 准备注册数据
    const registerData = {
      username: formData.username,
      password: formData.password,
      email: formData.email || undefined,
      phone: formData.phone || undefined
    }

    // 执行注册
    const response: any = await authApi.register(registerData)

    // 注册成功提示
    uni.showToast({
      title: '注册成功',
      icon: 'success'
    })

    // 延迟跳转到登录页面
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/auth/login'
      })
    }, 1500)
  } catch (error: any) {
    console.error('Register error:', error)
    uni.showToast({
      title: error.message || '注册失败',
      icon: 'none'
    })
  } finally {
    // 取消加载状态
    loading.value = false
  }
}

// 跳转到登录页面
const goToLogin = () => {
  uni.redirectTo({
    url: '/pages/auth/login'
  })
}
</script>

<style lang="scss" scoped>
.register-container {
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  .register-form {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx 40rpx;
    margin: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
    
    .logo-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      
      .logo {
        width: 280rpx;
        height: 200rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
        object-fit: cover;
      }
      
      .app-name {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .app-slogan {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .form-container {
      .form-item {
        margin-bottom: 20rpx;
        
        .form-input {
          width: 100%;
          height: 80rpx;
          padding: 0 20rpx;
          border: 2rpx solid #e5e5e5;
          border-radius: 10rpx;
          font-size: 28rpx;
          box-sizing: border-box;
          transition: border-color 0.3s;
          
          &:focus {
            border-color: #4B0082;
          }
        }
      }
    }
    
    .custom-button {
      margin-top: 20rpx;
      height: 80rpx;
      font-size: 32rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      
      &.primary {
        background: linear-gradient(135deg, #4B0082, #8A2BE2);
        color: #fff;
        box-shadow: 0 5rpx 15rpx rgba(75, 0, 130, 0.3);
      }
      
      &.loading {
        opacity: 0.7;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    .form-footer {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
      
      text {
        color: #4B0082;
        font-size: 28rpx;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>